import React, { memo, useEffect } from "react"
import type { ReactNode } from "react"
// react-redux
import { useDispatch } from "react-redux/es/exports"
// redux-tookit
import {
	fetchBannersAction,
	fetchHotRecommendsAction,
	fetchNewAlbumsAction,
	fetchRankingsAction,
	fetchArtistsAction,
} from "./store"
// 引入子组件
import Banners from "./c-cpns/Banners"
import HotRecommend from "./c-cpns/HotRecommend"
import NewAlbum from "./c-cpns/NewAlbum"
import Ranking from "./c-cpns/Ranking"
import Login from "./c-cpns/Login"
import SettleSingers from "./c-cpns/SettleSingers"
import HotAnchor from "./c-cpns/HotAnchor"
// 引入样式
import "./index.less"
interface Iprops {
	children?: ReactNode
}
const Recommend: React.FC<Iprops> = () => {
	const dispatch = useDispatch()

	useEffect(() => {
		dispatch(fetchBannersAction() as any)
		dispatch(fetchHotRecommendsAction() as any)
		dispatch(fetchNewAlbumsAction() as any)
		dispatch(fetchRankingsAction() as any)
		dispatch(fetchArtistsAction() as any)
	}, [])
	return (
		<div className="recommendContainer">
			<Banners />
			<div className="content wrap-v2">
				<div className="left">
					<HotRecommend />
					<NewAlbum />
					<Ranking />
				</div>
				<div className="right">
					<Login />
					<SettleSingers />
					<HotAnchor />
				</div>
			</div>
		</div>
	)
}
export default memo(Recommend)
